<template>
	<view class="main">
		<view class="header">
			<view class=""><image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/732ff202210081732504833.png" mode=""></image></view>
			<view class="">
				<view class="">支付成功!</view>
				<view class="thank">感谢你的购买</view>
			</view>

			<view class="hengtiao">
				<view class="ordermsg">
					<view class="price">
						<text>￥</text>
						{{ all }}
					</view>
					<view class="code">
						订单编号：{{
							orderFrom[0].uni_order_id == null
								? orderFrom[0].order_id
								: orderFrom[0].uni_order_id == undefined
								? orderFrom[0].order_id
								: orderFrom[0].uni_order_id == ''
								? orderFrom[0].order_id
								: orderFrom[0].uni_order_id
						}}
					</view>
					<view class="code">下单时间：{{ payTime }}</view>
					<view class="code">支付方式：微信支付</view>
				</view>
			</view>
		</view>
		<view class="orderdetail"><view class="" @click="orderDetail">订单详情</view></view>
		<view class="voluntarily">3秒后自动跳转至详情页</view>
	</view>
</template>

<script>
import { orderDetail } from '@/api/api.js';
export default {
	data() {
		return {
			time: '',
			orderId: '',
			orderFrom: '',
			payTime: '',
			all: ''
		};
	},
	onLoad(options) {
		this.orderId = options.orderId;
		this.all = options.all;
		this.init();
		this.time = setTimeout(() => {
			uni.reLaunch({
				url: '/page_shoppingcart/orderdetail/orderdetail?orderId=' + this.orderId
			});
			clearTimeout(this.time);
		}, 3000);
	},
	methods: {
		init() {
			let data = `uni=${this.orderId}`;
			orderDetail(data).then(res => {
				this.orderFrom = res.data.data.order;
				this.payTime = this.orderFrom[0].add_time;
				let time = new Date(this.payTime * 1000);
				let y = time.getFullYear();
				let m = time.getMonth() + 1;
				let d = time.getDate();
				let h = time.getHours();
				let f = time.getMinutes();
				let s = time.getSeconds();
				if (m < 10) {
					m = '0' + m;
				}
				if (f < 10) {
					f = '0' + f;
				}
				if (s < 10) {
					s = '0' + s;
				}
				this.payTime = y + '-' + m + '-' + d + ' ' + h + ':' + f + ':' + s;
			});
		},
		// 订单详情
		orderDetail() {
			clearTimeout(this.time);
			uni.reLaunch({
				url: '/page_shoppingcart/orderdetail/orderdetail?orderId=' + this.orderId
			});
		}
	}
};
</script>

<style lang="scss">
.main {
	background-color: #f5f5f5;
	width: 100vw;
	height: 100vh;
}

.header {
	height: 250rpx;
	background-color: #1ab374;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	color: #fff;

	image {
		width: 150rpx;
		height: 100rpx;
		vertical-align: middle;
	}

	.thank {
		font-size: 26rpx;
	}

	.hengtiao {
		position: absolute;
		bottom: 5%;
		width: 90%;
		height: 20rpx;
		background-color: #00a462;
		border-radius: 50px;
		z-index: 10;
		color: #000;
		padding: 0 20rpx;

		.ordermsg {
			width: 89%;
			position: absolute;
			top: 50%;
			padding: 20rpx;
			font-size: 28rpx;
			background-color: #fff;
			height: 450rpx;

			.price {
				text-align: center;
				padding: 30rpx;
				font-size: 60rpx;
				font-weight: 700;
				border-bottom: 2px dashed #eee;

				text {
					font-size: 26rpx;
				}
			}

			.code {
				padding: 30rpx 10rpx;
			}
		}
	}
}

.orderdetail {
	margin-top: 550rpx;
	display: flex;
	justify-content: center;

	> view {
		width: 200rpx;
		text-align: center;
		padding: 25rpx 70rpx;
		border-radius: 50px;
		font-size: 26rpx;
		background-color: #289958;
		color: #fff;
	}
}

.voluntarily {
	margin-top: 20rpx;
	text-align: center;
	font-size: 24rpx;
	color: #bbb;
}
</style>
